<template>
	<view class="page">
		<view class="text-area">
			<view class="lender">
				<view class="tip">
					<text>出借人</text>
				</view>
				<view class="content">
					<view class="add-info" @click="addPersonalInfo">
						<uni-icons type="plusempty" size="20" color="#308AFF" class="icon-plusempty"></uni-icons>
						<text>添加您的个人信息</text>
					</view>
					<view class="one-click-fill" @click="oneClickFill">
						<text>一键填写</text>
					</view>
				</view>
			</view>
			<view class="borrower">
				<view class="tip">
					<text>借款人</text>
				</view>
				<view class="content">
					<view class="other-party-fillsIn" v-if="active===2">
						<text class="h1">待对方填写</text>
						<text class="p">合同创建后，发送对方填写</text>
					</view>
					<view class="fillIn-borrower-info" v-else @click="addBorrowerInfo">
						<uni-icons type="plusempty" size="20" color="#F37A32" class="icon-plusempty"></uni-icons>
						<text>添加借款人信息</text>
					</view>
					<view class="fillIn-both-parties">
						<text @click="fillInParty(1)" :class="{'active': active===1}">由我填写</text>
						<text @click="fillInParty(2)" :class="{'active': active===2}">对方填写</text>
					</view>
				</view>
			</view>
		</view>
		<view class="form-box">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" :label-width="80" border>
				<uni-forms-item label="借款金额" required name="loanAmount">
					<uni-easyinput :inputBorder="false" v-model="valiFormData.loanAmount" placeholder="请输入借款金额">
						<template #right>
							<view class="unit">元</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="借款日期" required name="loanDate">
					<picker mode="date" :value="valiFormData.loanDate" :start="startDate" :end="endDate" @change="loanDateChange">
						<view class="time">{{valiFormData.loanDate}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="还款日期" required name="repaymentDate">
					<picker mode="date" :value="valiFormData.repaymentDate" :start="startDate" :end="endDate"
						@change="repaymentDateChange">
						<view class="time">{{valiFormData.repaymentDate}}</view>
					</picker>
					<view class="options">
						<view class="options-item" :class="{'interest-active': repaymentDateActive===index}"
							v-for="(item, index) in repaymentDateOptions" :key="index" @click="handleRepaymentDate(item, index)">
							{{item.name}}
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="借款事由" required name="reasonForLoan">
					<uni-easyinput type="textarea" :inputBorder="false" v-model="valiFormData.reasonForLoan"
						placeholder="请输入借款事由" />
				</uni-forms-item>
				<uni-forms-item label="利息" required name="interest">
					<uni-easyinput v-model="valiFormData.interest" :inputBorder="false" placeholder="请输入利息">
						<template #right>
							<view class="unit">元</view>
						</template>
					</uni-easyinput>
					<view class="options">
						<view class="options-item" :class="{'interest-active': interestActive===index}"
							v-for="(item, index) in interestOptions" :key="index" @click="handleInterest(index)">
							{{item.name}}
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="previewPromissoryNote('valiForm')">预览借条</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				active: 2,
				// 校验表单数据
				valiFormData: {
					loanAmount: '',
					loanDate: currentDate,
					repaymentDate: currentDate,
					reasonForLoan: '',
					interest: ''
				},
				// 校验规则
				rules: {
					loanAmount: {
						rules: [{
							required: true,
							errorMessage: '借款金额不能为空'
						}]
					},
					loanDate: {
						rules: [{
							required: true,
							errorMessage: '借款日期不能为空'
						}]
					},
					repaymentDate: {
						rules: [{
							required: true,
							errorMessage: '还款日期不能为空'
						}]
					},
					reasonForLoan: {
						rules: [{
							required: true,
							errorMessage: '借款事由不能为空'
						}]
					},
					interest: {
						rules: [{
							required: true,
							errorMessage: '利息不能为空'
						}]
					}
				},
				interestOptions: [{
					id: 1,
					name: "免息"
				}, {
					id: 2,
					name: "6%"
				}, {
					id: 3,
					name: "12%"
				}],
				interestActive: 0,
				repaymentDateOptions: [{
						id: 1,
						name: '一个月'
					},
					{
						id: 2,
						name: '三个月'
					},
					{
						id: 3,
						name: '半年'
					},
					{
						id: 4,
						name: '一年'
					}
				],
				repaymentDateActive: -1,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.valiForm.setRules(this.rules)
		},
		methods: {
			/** 添加个人信息 */
			addPersonalInfo() {
				uni.navigateTo({
					url: "/pages/index/basicInfo"
				})
			},
			/** 一键填写 */
			oneClickFill() {
				/* 获取用户登录信息， 自动填入姓名，手机号，身份证等信息 */
			},
			/** 借款人-填写对象 */
			fillInParty(_arg) {
				this.active = _arg
				if (_arg === 1) {
					/* 由我填写 */
					uni.navigateTo({
						url: "/pages/index/basicInfo"
					})
				}
			},
			/** 添加借款人信息 */
			addBorrowerInfo() {
				uni.navigateTo({
					url: "/pages/index/basicInfo"
				})
			},
			/** 预览借条 */
			previewPromissoryNote() {
				uni.showLoading()
				this.$refs.valiForm.validate().then(res => {
					uni.hideLoading()
					console.log('表单数据信息：', res);
					uni.navigateTo({
						url: "/pages/index/previewPromissoryNote"
					})
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			/** 获取时间转格式 */
			getDate(type, timestamp) {
				const date = timestamp ? new Date(timestamp) : new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			/** 借款日期时间选择 */
			loanDateChange(e) {
				this.valiFormData.loanDate = e.detail.value
			},
			/** 还款日期时间选择 */
			repaymentDateChange(e) {
				this.repaymentDateActive = -1
				this.valiFormData.repaymentDate = e.detail.value
			},
			/** 免息快捷键 */
			handleInterest(index) {
				this.interestActive = index
			},
			/** 还款日期快捷键 */
			handleRepaymentDate(item, index) {
				this.valiFormData.repaymentDate = this.getDate({
					format: true
				})
				this.repaymentDateActive = index
				if (item.id === 1) { //一个月
					const oneMonth = new Date(this.valiFormData.repaymentDate).getTime() + 2592000000
					this.$set(this.valiFormData, 'repaymentDate', this.getDate(null, oneMonth))
				} else if (item.id === 2) { //三个月 {
					const threeMonth = new Date(this.valiFormData.repaymentDate).getTime() + 2592000000 * 3
					this.$set(this.valiFormData, 'repaymentDate', this.getDate(null, threeMonth))
				} else if (item.id === 3) { //半年 {
					const sixMonth = new Date(this.valiFormData.repaymentDate).getTime() + 2592000000 * 6
					this.$set(this.valiFormData, 'repaymentDate', this.getDate(null, sixMonth))
				} else if (item.id === 4) { //一年 {
					const oneYear = new Date(this.valiFormData.repaymentDate).getTime() + 31104000000
					this.$set(this.valiFormData, 'repaymentDate', this.getDate(null, oneYear))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: #F7F7F7;

		.text-area {
			width: 100%;
			background-color: #fff;

			&>view {
				padding: 20rpx;

				.tip {
					font-size: 24rpx;
					padding: 8rpx;
					border-radius: 8rpx 8rpx 0 0;
					text-align: center;
					width: 30%;
				}

				.content {
					background: #F7F9FD;
					padding: 32rpx 20rpx;
					border-radius: 0 0 8rpx 8rpx;
					font-size: 32rpx;
					color: #333;
					display: flex;
					justify-content: space-between;
				}
			}

			.lender {

				//出借人
				.tip {
					background: #3A8FFF60;
					color: #3A8FFF;
				}

				.content {
					.add-info {
						display: flex;
						align-items: center;
						font-weight: bold;
						color: #308AFF;

						.icon-plusempty {
							margin-right: 16rpx;
						}
					}

					.one-click-fill {
						background-color: #2389FE;
						border-radius: 28rpx;
						padding: 8rpx 16rpx;
						color: #fff;
						font-size: 20rpx;
					}
				}
			}

			.borrower {

				//借款人
				.tip {
					background: #F37A3260;
					color: #F37A32;
				}

				.content {
					.other-party-fillsIn {
						display: flex;
						flex-direction: column;

						.h1 {
							font-weight: bold;
							color: #333;
							line-height: 44rpx;
						}

						.p {
							color: #9C9C9C;
							font-size: 24rpx;
							line-height: 44rpx;
						}
					}

					.fillIn-borrower-info {
						display: flex;
						align-items: center;
						font-weight: bold;
						color: #F37A32;

						.icon-plusempty {
							margin-right: 16rpx;
						}
					}

					.fillIn-both-parties {
						text {
							font-size: 22rpx;
							background: #ECF0FA;
							padding: 8rpx 20rpx;
							border-radius: 24rpx;

							&:first-child {
								margin-right: -12rpx;
							}

							&.active {
								position: relative;
								background: linear-gradient(to right, #FE312D 0%, #FE9A56cc 100%);
								color: #fff;
							}
						}
					}
				}
			}
		}

		.form-box {
			background-color: #fff;
			margin: 20rpx;
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;

			.unit {
				margin-right: 20rpx;
			}

			.time {
				height: 70rpx;
				line-height: 70rpx;
				padding-left: 20rpx;
			}

			.options {
				display: flex;
				justify-content: flex-end;

				.options-item {
					margin: 0 8rpx;
					padding: 10rpx 24rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					background-color: #F6F6F6;
					font-size: 24rpx;

					&:last-child {
						margin-right: 0;
					}

					&.interest-active {
						background-color: #1677FF;
						color: #fff;
					}
				}
			}

			button {
				margin-top: 40rpx;
			}
		}
	}
</style>